import React, { useState, useEffect } from 'react';
import SelfHead from 'components/common/selfHead';
import Cascade from 'components/common/cascade';
import { List, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import SelfInput from 'components/common/selfInput';
import industryTypes from 'dic/industryType';
import { signup, login } from 'ser/actions';
import { history } from 'umi';
import './index.less';

function Signup(props) {
  const [flag, setFlag] = useState(false);
  const [obj, setObj] = useState({
    industryTypes: industryTypes,
    industryType: '',
    companyName: '',
    accountName: '',
    pswd: '',
    pswdRe: '',
  });

  function handleOnChange(v, label, field) {
    if (label === '行业类型') {
      v = v[0];
    }
    setObj({
      ...obj,
      [field]: v,
    });
  }
  async function handleSubmit() {
    if (flag) {
      Toast.info('不可重复提交', 1);
      return;
    }
    if (Object.values(obj).some(item => item === '')) {
      Toast.info('请填写完整信息', 1);
      return;
    }
    if (obj.pswd !== obj.pswdRe) {
      Toast.info('两次密码输入不一致', 1);
      return;
    }
    setFlag(true);
    const res = await signup({ ...obj });
    if (res.code === 0) {
      Toast.success('注册成功!', 1, async () => {
        const res = await login({
          username: obj.accountName,
          password: obj.pswd,
        });
        const { code, token, msg, companyType, isComplete, user } = res;
        if (code === 200) {
          sessionStorage.setItem('token', token);
          sessionStorage.setItem('companyType', companyType);
          sessionStorage.setItem('isComplete', isComplete);
          sessionStorage.setItem('user', JSON.stringify(user));
          history.replace('/updateInfo');
        }
      });
    } else {
      setFlag(false);
    }
  }
  function goLogin() {
    history.replace('/login');
  }
  return (
    <div className="signup">
      <SelfHead
        title="注册"
        rightContent={<span onClick={goLogin}>登录</span>}
      />
      <div className="sign-body">
        <div className="sign-body_form">
          <List className="self-list">
            <Cascade
              label="行业类型"
              title="请选择"
              data={obj.industryTypes}
              cols={1}
              handleOnChange={handleOnChange}
              field="industryType"
            />
            <SelfInput
              label="企业名称"
              rule={{
                len: 3,
                empty: '请输入企业名称',
                error: '请正确输入企业名称',
              }}
              handleInputChange={handleOnChange}
              field="companyName"
              placeholder="请输入企业名称"
            />
            <SelfInput
              label="登录账户名"
              type="phone"
              rule={{
                len: 3,
                empty: '请输入登录账户名',
                error: '请正确输入登录账户',
                reg: /^1(3|4|5|6|7|8|9)\d{9}$/,
              }}
              handleInputChange={handleOnChange}
              field="accountName"
              placeholder="请输入11位手机号"
            />
            <SelfInput
              label="密码"
              type="password"
              rule={{
                len: 6,
                empty: '请输入密码',
                error: '请输入正确的密码',
                reg: /^[A-Za-z0-9._~!@#$%^&*]{6,16}$/,
              }}
              handleInputChange={handleOnChange}
              field="pswd"
              placeholder="6-16位字母、数字或符号组成"
            />
            <SelfInput
              label="确认密码"
              type="password"
              rule={{
                len: 6,
                empty: '请输入确认密码',
                error: '两次密码不一致',
              }}
              handleInputChange={handleOnChange}
              field="pswdRe"
            />
          </List>
        </div>
        <div className="supply-add-btn" onClick={handleSubmit}>
          提交
        </div>
      </div>
    </div>
  );
}
export default createForm()(Signup);
